<template>
  <div class="toper">
    <div class="shuliang" v-for="item in icons">
      <div class="family">
        <img :src="item.icon" alt="" />
      </div>
      <div class="all_number">
        <div class="number">
          <div class="shu">
            {{ item.value }}<span class="danwei">{{ item.unit }}</span>
          </div>
        </div>
        <div class="zong">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icons: [
        {
          icon: require("assets/img/day/04-1.png"),
          name: "总户数",
          value: 35000,
          unit: "户",
        },
        {
          icon: require("assets/img/day/04-2.png"),
          name: "人员总数量",
          value: 21000,
          unit: "人",
        },
        {
          icon: require("assets/img/day/04-3.png"),
          name: "房屋总数量",
          value: 45000,
          unit: "户",
        },
        {
          icon: require("assets/img/day/04-4.png"),
          name: "企业总数量",
          value: 288,
          unit: "个",
        },
        {
          icon: require("assets/img/day/04-5.png"),
          name: "耕地总面积",
          value: 222,
          unit: "个",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.toper {
  width: 100%;
  height: 137px;
  display: flex;
  justify-content: space-around;
  .shuliang {
    margin-top: 30px;
    width: 221px;
    height: 137px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .family {
      width: 109px;
      height: 137px;
      display: flex;
      align-items: center;
      img {
        width: 98px;
        height: 92px;
      }
    }
    .all_number {
      .number {
        height: 36px;
        position: relative;
        text-align: left;
        .shu {
          font-size: 35px;
          font-family: shuzi, serif;
          color: rgb(0, 228, 255);
          .danwei {
            font-size: 12px;
            color: rgb(0, 228, 255);
          }
        }
      }
      .zong {
        font-size: 15.6px;
        line-height: 34px;
        color: #fff;
        text-align: left;
        letter-spacing: 2px;
      }
    }
  }
}
</style>